<html>
	<head>
		<title>Add the Asphalt</title>
        <link rel="stylesheet" href="../../style.css">
		<script type="text/javascript" src="../../lib/spidergl.js"></script>
		<script type="text/javascript" src="../../lib/spidergl-config.js"></script>
		<script type="text/javascript" src="../../lib/nvmc.js"></script>
		<script type="text/javascript" src="../../lib/nvmc-config.js"></script>
        <script type="text/javascript" src="../../globals.js"></script>
		<script type="text/javascript" src="../../lib/dataview.js"></script>
		<script type="text/javascript" src="../../lib/load_ply/parsePLY.js"></script>
		<script type="text/javascript" src="../../lib/load_ply/importPLY.js"></script>
		<script type="text/javascript" src="../../lib/obj_importer.js"></script>
		<script type="text/javascript" src="../../chapter3/cube.js"></script>
		<script type="text/javascript" src="../../chapter3/cone.js"></script>
		<script type="text/javascript" src="../../chapter3/cylinder.js"></script>
		<script type="text/javascript" src="../../chapter4/0/track.js"></script>
		<script type="text/javascript" src="../../chapter4/0/race.js"></script>
		<script type="text/javascript" src="../../chapter4/0/building.js"></script>
		<script type="text/javascript" src="../../chapter4/0/quadrilateral.js"></script>
		<script type="text/javascript" src="../../chapter7/1/cabin_no_mirror.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedtrack.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedbuilding.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedquadrilateral.js"></script>
		<script type="text/javascript" src="../../chapter7/1/rearmirror.js"></script>
		<script type="text/javascript" src="../../chapter4/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter5/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter6/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/0/shaders.js"></script>
        <script type="text/javascript" src="../../chapter7/2/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/3/shaders.js"></script>
        <script type="text/javascript" src="../../chapter7/4/shaders.js"></script>
		<script type="text/javascript" src="../../chapter4/0/0.js"></script>
		<script type="text/javascript" src="../../chapter4/1/1.js"></script>
		<script type="text/javascript" src="../../chapter4/2/2.js"></script>
		<script type="text/javascript" src="../../chapter5/0/0.js"></script>
		<script type="text/javascript" src="../../chapter6/0/0.js"></script>
		<script type="text/javascript" src="../../chapter6/3/phong_shaders.js"></script>
		<script type="text/javascript" src="../../chapter6/0/compute_normals.js"></script>
		<script type="text/javascript" src="../../chapter7/0/0.js"></script>
		<script type="text/javascript" src="../../chapter7/1/1.js"></script>
        <script type="text/javascript" src="../../chapter7/2/2.js"></script>
		<script type="text/javascript" src="../../lib/nvmc-glue.js"></script>
	</head>
	<body>
    <ul class="combar">
        <li>Instructions</li>
        <li>[w]: move forward (mode 1 and 2)<br>
            [s]: move backward (mode 1 and 3)<br>
            [a]: steer left (mode 1) / pan left (mode 3)<br>
            [d]: steer right (mode 1) / pan right (mode 3)<br>
            [q]: move up (mode 2,3)<br>
            [e]: move down (mode 2,3)<br>
            [2]: ++mode<br>
            [1]: --mode<br>
            <br>
            Modes:<br>
            1: Chase View <br>
            2: Photographer View<br>
            3: The observer Camera<br>
            4: Driver Perspective <br>
            <br>
            [n]: Orbit around a fix point in front of the camera<br>
            [m]: Look around <br>
            [l]: lock view to the car (in photographer mode)<br>
            [u]: unlock view to the car (in photographer mode)<br>
            <b>[x]: enable/disable normal mapping on the street</b>b>
    </ul>

    <ul class="navbar">
        <li> Section 7.8.3, page 245 </li>
        <li> Here we use object space  normal mapping to show the asphalt. To see the difference between using or not Normal Mapping, you can press [x] to toggle</li>
    </ul>

    <center>
			<h2>Add the Asphalt</h2>
			<div>
			  <hr/>
			  <canvas id="nvmc-canvas" width="600" height="400" style="border:1px solid gray;"></canvas>
			  <hr/>
			</div><h3>Log</h3>
			
			  <textarea id="nvmc-log" rows="4" cols="80"></textarea>
			<div>
			  <div id="nvmc-fps">FPS</div>
			  <div id="nvmc-latency">Latency</div>
			  <div id="nvmc-server-clock-delta">Server Clock Delta</div>
			  <div id="nvmc-server-time">Server Time</div>
			</div>
			<hr/>
		</center>
	</body>
</html>
